<template>
  <div class="validcode">
    <x-header>验证手机号<a slot="right"></a></x-header>
    <group :title="`短信验证码验证码已发送到 ${phone} 请填写验证码：`">
      <x-input type="text" placeholder="请输入6位数字" keyboard="number" v-model="validcode" :min="6" :max="6">
        <span slot="right" v-if="sendMsgDisabled">{{`${time}s`}}</span>
        <span slot="right" v-else @click="send">重新发送</span>
      </x-input>
    </group>
    <div class="btn-box">
      <span style="background:#EFA79B;color:#ffffff;" class="validcode-btn" @click="handleNextStep">下一步</span>
    </div>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import {
  XInput,
  Group,
  XHeader
} from 'vux';
const IndexStore = namespace('login');

@Component({
  components: {
    XInput,
    Group,
    XHeader
  }
})
export default class ValidCode extends Vue {
  @IndexStore.Action getLoginValidateCode;
  validcode = ''
  sendMsgDisabled = true
  time = 60
  created () {
    this.phone = this.$route.query.phone
    this.getCode()
  }
  getCode () {
    const params = {
      tel: this.phone
    }
    this.getLoginValidateCode(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.send()
      }
    })
  }
  send () {
    let me = this
    me.sendMsgDisabled = true
    let interval = window.setInterval(() => {
      if ((me.time--) <= 0) {
        me.time = 60
        me.sendMsgDisabled = false
        window.clearInterval(interval)
      }
    }, 1000)
  }
  handleNextStep () {
    this.$router.push('/resetpassword')
  }
}
</script>
<style lang="less">
  .validcode {
    .weui-cells__title {
      // font-size: 12px;
      color: #dddddd;
    }
    .code-validcode {
      text-align: right;
      padding: 10px;
      // font-size: 12px;
    }
    .btn-box {
      margin-top: 30px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .validcode-btn {
      border-radius: 40px;
      padding: 6px 40%;
      font-size: 14px;
    }
  }
</style>
